<template>
  <div>
    <div class="tp3">
      <p>校园人员流动情况</p>
    </div>

    <div class="shuidian1">
      <div class="dian1">
        <div>
          <img src="../assets/images2/yestoday.png" alt="" />
        </div>
        <div>
          <p>6</p>
          <span>昨日往来访客</span>
        </div>
      </div>
      <div class="dian2">
        <div>
          <img src="../assets/images2/today.png" alt="" />
        </div>
        <div>
          <p>13</p>
          <span>昨日往来访客</span>
        </div>
      </div>
    </div>
    <div class="da3" ref="wrap"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, ref, watch } from 'vue'

let wrap = ref('')

let option = ref({
  legend: {
    icon: 'circle',
    textStyle: {
      color: 'white'
    }
  },
  tooltip: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  dataset: {
    dimensions: ['product', '今日外来访客', '昨日外来访客'],
    source: [
      { product: '一月', 今日外来访客: 60.3, 昨日外来访客: 85.8 },
      { product: '二月', 今日外来访客: 43.3, 昨日外来访客: 85.8 },
      { product: '三月', 今日外来访客: 83.1, 昨日外来访客: 73.4 },
      { product: '四月', 今日外来访客: 86.4, 昨日外来访客: 65.2 },
      { product: '五月', 今日外来访客: 72.4, 昨日外来访客: 53.9 },
      { product: '六月', 今日外来访客: 50.4, 昨日外来访客: 35.9 }
    ]
  },
  xAxis: {
    type: 'category'
  },
  yAxis: {},
  color: [
    {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: 'blue' // 0% 处的颜色
        },
        {
          offset: 1,
          color: 'purple' // 100% 处的颜色
        }
      ],
      global: false // 缺省为 false
    },
    {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: 'yellow' // 0% 处的颜色
        },
        {
          offset: 1,
          color: 'green' // 100% 处的颜色
        }
      ],
      global: false // 缺省为 false
    }
  ],
  // Declare several bar series, each will be mapped
  // to a column of dataset.source by default.
  series: [
    {
      type: 'bar',
      // 圆角
      itemStyle: {
        borderRadius: 15
      },
      // 柱子粗细
      barWidth: '15%'
    },
    {
      type: 'bar',
      // 圆角
      itemStyle: {
        borderRadius: 15
      },
      // 柱子粗细
      barWidth: '15%'
    }
  ]
})
const myChart = ref()
onMounted(() => {
  myChart.value = echarts.init(wrap.value)
  myChart.value.setOption(option.value)
})

watch(option, () => {
  if (option.value) {
    myChart.value.setOption(option.value)
  }
})
</script>


<style>
.tp3 {
  width: 22%;
  height: 38px;
  /* height: 10px; */
  background: url('../assets//images2/titlebg.png');
  transform: rotateY(180deg);
  background-size: 100% 100%;
  position: absolute;
  right: 100px;
  top: 500px;
  line-height: 40px;
}
.tp3 p {
  transform: rotateY(180deg);
  color: #fff;
  padding-left: 30px;
}
.shuidian1 {
  width: 22%;
  height: 50px;
  position: absolute;
  top: 550px;
  right: 100px;
  /* background-color: #0c1d5f; */
  /* background-color: pink; */
}

.da3 {
  width: 320px;
  height: 170px;
  background-color: #0c1d5f;
  margin-top: 180px;
  margin-left: 61px;
}
.dian1 {
  background-color: #0c1d5f;
  flex: 1;
  display: flex;
  text-align: center;
  /* background-color: red; */
  width: 180px;
  float: left;
  height: 55px;
  border: 1px solid blue;
  margin-right: 10px;
  font-size: 14px;
}
.dian1 div {
  margin-left: 20px;
  color: #fff;
}
.dian1 p {
  line-height: 0px;
  margin-left: 70px;
}
.dian2 p {
  line-height: 0px;
  margin-left: 70px;
}
.dian2 div {
  margin-left: 20px;
  color: #fff;
}
.dian1 div img {
  margin-top: 10px;
}
.dian2 div img {
  margin-top: 10px;
}
.dian2 {
  background-color: #0c1d5f;
  border: 1px solid blue;
  flex: 1;
  display: flex;
  text-align: center;
  /* background-color: rgb(181, 141, 141); */
  width: 180px;
  height: 55px;
  font-size: 14px;
}
.dian2 div {
  margin-left: 20px;
}
</style>
